<template>
  <!-- 对话框表单 -->
  <el-dialog width="40%"
             :close-on-click-modal="false"
             :model-value="['audit'].includes(baTable.form.operate!)"
             @close="baTable.toggleForm"
             :destroy-on-close="true">
    <template #header>
      <div class="title"
           v-drag="['.ba-operate-dialog', '.el-dialog__header']"
           v-zoom="'.ba-operate-dialog'">
        {{ t('system.rabbitmq.audit') }}
      </div>
    </template>
    <el-scrollbar v-loading="baTable.form.loading"
                  class="ba-table-form-scrollbar">
      <div class="ba-operate-form">
        <el-form ref="formRef"
                 @keyup.enter="onSubmitPre()"
                 :model="baTable.form.items"
                 :rules="rules"
                 v-if="!baTable.form.loading">
          <el-radio-group v-model="baTable.form.items!.status">
            <el-radio :label="1"
                      size="large">{{ t('system.rabbitmq.status_enable') }}</el-radio>
            <el-radio :label="2"
                      size="large">{{ t('system.rabbitmq.status_disable') }}</el-radio>
          </el-radio-group>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div>
        <el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
        <el-button v-blur
                   :loading="baTable.form.submitLoading"
                   @click="onSubmitPre()"
                   type="primary">
          {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, inject, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'
import type { FormInstance, FormItemRule } from 'element-plus'

import { confirmInfo } from '/@/api/backend/system'

const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    status: [buildValidatorData({ name: 'required', trigger: 'change', title: t('utils.Content cannot be empty') })],
})
watch(
    () => baTable,
    (newVal) => {
        // console.log(newVal)
    },
    {
        deep: true,
    }
)
const onSubmitPre = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            onSubmit()
        }
    })
}
const onSubmit = () => {
    const params = { ...baTable.form.items }
    confirmInfo(params).then(() => {
        baTable.toggleForm('')
        baTable.onTableHeaderAction('refresh', {})
    })
}
</script>

<style scoped lang="scss">
.avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--el-border-radius-small);
    box-shadow: var(--el-box-shadow-light);
    border: 1px dashed var(--el-border-color);
    cursor: pointer;
    overflow: hidden;
    width: 110px;
    height: 110px;
}
.avatar-uploader:hover {
    border-color: var(--el-color-primary);
}
.avatar {
    width: 110px;
    height: 110px;
    display: block;
}
.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
